<!doctype html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700,900|Fira+Sans:400,400italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="timeline/css/reset.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="timeline/css/style.css"> <!-- Resource style -->
	<script src="timeline/js/modernizr.js"></script> <!-- Modernizr -->
	<title>欢迎你 时间轴</title>
</head>
<body>
<section class="cd-horizontal-timeline">
	<div class="timeline">
		<div class="events-wrapper">
			<div class="events">
				<ol>
					<li><a href="#0" data-date="20/06/2018" class="selected">6.20</a></li>
					<li><a href="#0" data-date="13/07/2018">7.13</a></li>
					<li><a href="#0" data-date="10/08/2018">8.10</a></li>
				</ol>

				<span class="filling-line" aria-hidden="true"></span>
			</div> <!-- .events -->
		</div> <!-- .events-wrapper -->
			
		<ul class="cd-timeline-navigation">
			<li><a href="#0" class="prev inactive">Prev</a></li>
			<li><a href="#0" class="next">Next</a></li>
		</ul> <!-- .cd-timeline-navigation -->
	</div> <!-- .timeline -->

	<div class="events-content">
		<ol>
			<li class="selected" data-date="20/06/2018">
				<h2>离别</h2>
				<em>2018-6-20</em>
				<p>	
					穿着学士服的这天，是值得怀念的一天。
				</p>
			</li>

			<li data-date="13/07/2018">
				<h2>工作</h2>
				<em>2018-7-13</em>
				<p>	
					社会人，工作了。
				</p>
			</li>

			<li data-date="10/08/2018">
				<h2>发粮</h2>
				<em>2018-8-10</em>
				<p>	
					两个字。
				</p>
			</li>

			
		</ol>
	</div> <!-- .events-content -->
</section>
	
<script src="timeline/js/jquery-2.1.4.js"></script>
<script src="timeline/js/jquery.mobile.custom.min.js"></script>
<script src="timeline/js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>